<template>
  <div class="card-box">
    <p v-if="city === 'xian'">
      西安库存 <b>{{ xian }}</b> 件，
    </p>
    <p v-if="city === 'chengdu'">
      <!-- 成都库存 <b>{{ chengduCount }}</b> 件， -->
      成都库存 <b>{{ chengdu }}</b> 件，
    </p>
    物流：
    <select>
      <option :value="item" v-for="item in expressList" :key="item">
        {{ item }}
      </option>
    </select>
    <button class="pull-right" @click="doDeliver(city, -1)">发货 >></button>
    <button class="pull-right" @click="doDeliverAsync(city, -1)">
      异步发货 >>
    </button>
  </div>
</template>

<script>
import { mapState, mapMutations,mapActions } from "vuex";
export default {
  props: {
    city: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // xianCount: 100,
      // chengduCount: 80,
      expressList: ["ZT-中通", "YT-圆通", "SF-顺丰"],
    };
  },
  computed: {
    // 原样映射
    ...mapState(["xian"]),
    // 具名映射
    ...mapState({
      chengduCount: "chengdu",
    }),

    // 模块化方法
    ...mapState({
      xian : state => state.xian.count,
      chengdu : state => state.chengdu.count
    })
  },
  methods: {



    // 原样映射
    ...mapMutations(["updateXian"]),
    // 具名映射
    ...mapMutations({
      updateChengduCount: "updateChengdu",
    }),
    // 原样映射
    ...mapActions(['deliver']),
    // 具名映射
    ...mapActions({
      deliversCount : 'delivers'
    }),

    doDeliver(city, changedValue) {
      if (city === "xian") {
        // 原始方法
        // this.$store.commit('updateXian',changedValue)
        this.updateXian(changedValue);
      }
      if (city === "chengdu") {
        this.updateChengduCount(changedValue);
      }
    },
    doDeliverAsync(city, changedValue) {
      setTimeout(() => {
        if (city === "xian") {
          // 原始方法
          // this.$store.dispatch('deliver',changedValue)
          this.deliver(changedValue)
        }
        if(city === 'chengdu') {
          this.deliversCount(changedValue)
        }
      }, 1000);
    },

    // // 执行发货
    // doDeliver(city, changedValue) {
    //   /**
    //    * 一般来说发货操作都是异步的，需要调后端接口
    //    * 后台接口调用成功后，会更新库存到本地
    //    * 然后本地再同步更改当前的库存量
    //    */

    //   // 模拟异步方案1：使用定时器
    //   setTimeout(() => {
    //     if (city === "xian") {
    //       this.xianCount += changedValue;
    //     } else {
    //       this.chengduCount += changedValue;
    //     }
    //   }, 100);

    //   // 模拟异步方案2：使用Promise
    //   // Promise.resolve()
    // },
  },
};
</script>